<template>
  <div style="width: 100%; ">
  <navi style="width: 75.5%;margin: 0 auto;"></navi>
  <div class="subject">
    <div class="subjectCourse">我的日程
    <span>1111</span><span>fdfd</span><span>grgrgrg</span>
    </div>
    <div class="subjectModel">健身方案</div>
  </div>
    <div class="subject2">
      <div class="subjectOrder">我的订单</div>
      <div class="subjectStore">我的课程模板
        <div v-for="(coursetemplate,index) in coachs.courseTemplates" :key="index">
        <span>{{coursetemplate.cotno}}</span>
        <span>{{coursetemplate.cotname}}</span>
        <span>{{coursetemplate.cotimg}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from "../../../../axios/api";
import navi from "./navi";
export default {
  name: "index",
  components: {navi},
  data() {
    return {
      coachs:"",
      isshowHead:true,
      isshowInfo:false
    }
  },
  methods: {
    setDataFromAxios: function () {
      //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面coachController/getCoachByPage?currPage=1&pageSize=3
      api.setDataFromAxios("/api/coachController/selectCoachWithCourseTemplate/c0001", null, "get" )
        .then(dto => {
          this.coachs = dto.t;
        });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
    },
    show(){
      this.isshowInfo = true
    },
    closeShow(){
      this.isshowInfo = false
    }
  },
  created:function () {
    this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
  }
}
</script>

<style scoped>
body, div, img,dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, table, th, td {margin:0; padding:0;}
.subject{width: 75.5%;height: 200px;margin: 0 auto;margin-top: 5px}
.subject .subjectCourse{float: left; width: 40%; background-color: #1CA261}
.subject .subjectModel{float: right; width: 59%; background-color: #bbffff}
.subject2{width: 75.5%;height: 200px;margin: 0 auto;margin-top: 5px}
.subject2 .subjectOrder{float: left; width: 60%; background-color: #1CA261}
.subject2 .subjectStore{float: right; width: 39%;}
</style>
